<template>
  <div style="position: relative">
    <ul class="swiper">
      <li v-for="(item, i) in swiperList" :key="i">
        <div :class="i === currIndex ? 'show' : 'hide'">
          <img width="100%" :src="item.imgUrl" alt="" />
          <p style="text-align: left;margin:8px 0">{{item.title}}</p>
          <p style="color:#666666;font-size:14px">{{item.text}}</p>
        </div>
      </li>
    </ul>
    <ul class="iconitem">
        <li @click="currIndex = i" v-for="item,i in swiperList" :key="i" :class="i === currIndex ? 'ccc':'bbb'"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ivTimer: null,
      currIndex: 1,
    };
  },
  props: ["swiperList"],
  methods: {
    sliderTimer() {
      this.currIndex = (this.currIndex + 1) % this.swiperList.length;
    },
  },
  mounted() {
    this.ivTimer = setInterval(this.sliderTimer, 10000);
  },
};
</script>
<style lang="scss" scoped>
.swiper {
    
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  li{
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.8s ease;
  }
}
.iconitem{
    position: absolute;
    z-index: 3;
    bottom: -126px;
    right: 15px;
    li{
            width: 15px;
    border-radius: 5px;
    height: 8px;
    float: left;
    margin: 0 3px;
    }
}

.show {
  opacity: 1;
}
.hide {
  opacity: 0;
}
.ccc{background-color: #ff9d00;}
.bbb{background-color: #fff;}
</style>